<template>
	<view v-if="show" class="login_block">
		<view class="login_close block_top block_bottom">
			<text @click="closeView">✖️</text>
		</view>
		<view class="login_welcome text_center block_top bottom">
			<text class="welcome_text">🌼Hi~，欢迎登录</text>
			<text class="welcome_info top block_bottom">每日一言</text>
			<text class="welcome_info text_left">{{welcome}}</text>
		</view>
		<!-- 数据收集 -->
		<view class="login_data top bottom">
			<!-- 账号密码 -->
			<input v-model="login.account" class="input_block bottom" type="text" placeholder="输入账号"/>
			<input v-model="login.password" class="input_block" type="safe-password" :password="passwordShow" :placeholder="type!='修改' ? '输入密码':'输入新密码'"/>
			<view class="show_password block_bottom block_top">
				<view @click="switchPasswordSate()">
					<text v-if="passwordShow != true">👁︎️︎</text>
				</view>
				<text @click="switchPasswordSate()">显示密码︎</text>
			</view>
			<!-- 验证码 -->
			<view class="show_code bottom">
				<input v-model="login.code" type="text" placeholder="输入验证码"/>
				<image v-if="showCode" @click="getCode()"  :src="codeImg"></image>
				<view v-if="!showCode" @click="getCode()" class="showCode">获取验证码</view>
			</view>
			<!-- 登录 -->
			<button @click="submit()" class="login_go_send">{{type}}</button>
		</view>
		<!-- 状态切换 注册 登录 遗忘密码  -->
		<view class="other_option top">
			<text class="text_center" @click="switchType('登录')" v-if="type!='登录'">登录</text>
			<text class="text_center" @click="switchType('注册')" v-if="type!='注册'">注册</text>
			<text class="text_center" @click="switchType('修改')" v-if="type!='修改'">忘记</text>
		</view>
	</view>
</template>

<script>
	import user from '../../common/api/user/user';
	import request from '../../common/api/request';
	export default {
		created() {
			this.getOneTalk();
		},
		name:'LoginView',
		data() {
			return {
				// 关闭当前板块
				show:false,
				// 展示验证码
				showCode:false,
				// 密码显示
				passwordShow:true,
				// 欢迎语句
				welcome:'',
				// 登录 注册 修改
				type: "登录",
				// 验证码数据
				codeImg:'',
				// 登录数据
				login:{
					account:'',
					password:'',
					code:''
				}
			}
		},
		methods: {
			// 提交数据
			submit(){
				switch(this.type) {
					case "登录":
						this.userLogin();
						break;
					case "注册":
						this.userRegister();
						break;
					case "修改":
						this.userUpdate();
						break;
				}
			},
			// 登录
			userLogin(){
				if (this.checkData()){ 
					user.login(this.login)
					.then(res=>{
						// 保存token到本地
						this.$store.commit('loginUser',{account:this.login.account,token:res.data.token})
						// 关闭页面清楚数据
						this.closeView();
						// 通知父组件登录成功
						this.parentLoginSuccess();
					})
				}
			},
			// 忘记密码
			userUpdate(){
				if (this.checkData()){
					user.forget(this.login)
					.then(res=>{
						// 保存token到本地
						this.$store.commit('loginUser',{account:this.login.account,token:res.data.token})
						// 关闭页面清楚数据
						this.closeView();
						// 通知父组件登录成功
						this.parentLoginSuccess();
					}) 
				}
			},
			// 注册用户
			userRegister(){
				if (this.checkData()){
					user.register(this.login)
					.then(res=>{
						this.userLogin();
					})
				}
			},
			// 检查数据数据
			checkData(){
				if (this.login.account != '' && this.login.code != '' && this.login.password != '') {
					return true;
				}else{
					uni.showToast({
						title: '🥀还有数据没有填写',
						icon: 'none',
						position:"bottom",
					})
					return false;
				}
			},
			switchType(type){
				this.type=type;
			},
			// 打开/关闭窗口
			closeView(){
				this.show = false;
				this.login.account ="";
				this.login.password ="";				
				this.login.code ="";
				this.passwordShow = false;
				this.showCode = false;
				this.type = "登录";
			},
			showView(){
				this.show = true;
			},
			// 切换密码显示状态
			switchPasswordSate(){
				if (this.passwordShow) {
					this.passwordShow = false;
				}else{
					this.passwordShow = true;
				}
			},
			// 拉取每日一言
			getOneTalk(){
				uni.request({
					url:  'https://tenapi.cn/v2/yiyan?format=json',
					type: "post",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						var msg = res.data.data.hitokoto;
						if (msg.length > 26) {
							msg = msg.substring(0,24 )+"...";
						}
						this.welcome = msg;
					}
				});
			},
			// 拉取验证码
			getCode(){
				if (this.login.account.length < 10) {
					uni.showToast({
						title: '🥀账号长度不足十位',
						icon: 'none',
						position:"center",
					}) 
					return this.showCode = false;
				}
				if (!this.showCode){
					this.showCode = true;
				}
				user.code(this.login.account)
					.then(res=>{
						var content = res.data.code;
						var codeData = uni.base64ToArrayBuffer(content)
						var blob = new Blob([codeData]);
						this.codeImg = URL.createObjectURL(blob);
					});
			},
			// 通知父组件登录成功
			parentLoginSuccess(){
				// #ifdef H5 
				if (this.$parent.$parent.loginSuccess != undefined) {
					this.$parent.$parent.loginSuccess();
					return;
				}
				// #endif
				if (this.$parent.loginSuccess != undefined) {
					// 调用父组件方法
					this.$parent.loginSuccess();
					return;
				}
			}
		}
	}
</script>

<style>
/* 标题内容 */
.login_block{
	margin-top: 55%;
	background-color: #fcfcfc;
	border: 2px solid #e8efc4;
	border-radius: 30px;
	height: 600px;
	width: 90%;
	position: fixed;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.login_welcome{
	width: 80%;
	height: 20%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.welcome_text{
	font-size: 22px;
}
.welcome_info{
	width: 80%;
	font-size: 14px;
}
.login_close{
	width: 90%;
}
.login_close text{
	float: right;
}
/* 登录信息 */
.login_data{
	width: 90%;
	height: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.input_block {
	border: 2px solid #e8efc4;
	background-color: white;
	border-radius: 20px;
	width: 80%;
	height: 50px;
	text-indent: 1em;
	font-size: 20px;
}
.show_password{
	width: 80%;
	height: 40px;
	display: flex;
	align-items: center;
	color: #3f3f3f;
}
.show_password view{
	width: 20px;
	height: 20px;
	border: 1px solid #3f3f3f;
	margin-left: 10px;
	margin-right: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
}
.show_code{
	display: flex;
	align-items: center;
	width: 80%;
	height: 50px;
}
.showCode{
	height: 40px;
	width: 50%;
	margin-right: 4%;
	background-color: white;
	border: 2px solid #e8efc4;
	text-align: center;
	line-height: 40px;
	font-size: 20px;
}
.show_code input {
	height: 40px;
	width: 55%;
	margin-right: 4%;
	border-radius: 20px;
	background-color: white;
	border: 2px solid #e8efc4;
	text-align: center;
	font-size: 20px;
}
.show_code image {
	height: 40px;
	width: 40%;
	background-color: white;
	border: 1px solid #e8efc4;
	font-size: 20px;
}
.login_go_send{
	background-color: #e8efc4;
	width: 80%;
	height: 50px;
	font-size: 20px;
}
.other_option{
	width: 80%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.other_option text{
	width: 30%;
	height: 30px;
}
</style>
